<template>
  <div>
    <el-menu
      :default-active="activePath"
      class="el-menu-demo"
      mode="horizontal"
      router
      active-text-color="#409EFF"
    >
      <el-menu-item index="/main/tableArea">桌位区域</el-menu-item>
      <el-menu-item index="/main/tableList">桌位列表</el-menu-item>
    </el-menu>
    <div class="table-box">
      <el-container>
        <el-header class="table-title" height="40px">
          <el-row>
            <el-col :span="18">Banner列表</el-col>
            <el-col :span="6">
              <el-button
                class="btn-size"
                type="primary"
                icon="el-icon-circle-plus-outline"
                @click="dialogFormVisible_add = true"
                >新增</el-button
              >
              <el-button
                class="btn-size"
                type="danger"
                icon="el-icon-delete"
                @click="batchDelete()"
                >批量删除</el-button
              >
            </el-col>
          </el-row>
        </el-header>
        <el-container>
          <el-aside style="padding: 20px" class="table-content">
            <el-menu
              :default-active="nowReginId"
              class="el-menu-demo"
              mode="vertical"
              @select="handleSelect"
              align="center"
            >
              <el-menu-item disabled class="menu-title">区域</el-menu-item>
              <el-menu-item index="0">A区</el-menu-item>
              <el-menu-item index="1">B区</el-menu-item>
              <el-menu-item index="2">C区</el-menu-item>
              <el-menu-item index="">全部</el-menu-item>
            </el-menu>
          </el-aside>
          <el-main class="table-content">
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%; margin-top: 11px"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection"> </el-table-column>
              <el-table-column label="序号" width="50" align="center">
                <template slot-scope="scope">{{(nowPage-1)*pageCount+scope.$index+1}}</template>
              </el-table-column>
              <el-table-column prop="name" label="桌位名称" align="center">
              </el-table-column>
              <el-table-column label="可容纳人数" align="center"
                ><template slot-scope="scope">{{ scope.row.num }}人</template>
              </el-table-column>
              <el-table-column
                prop="regionType"
                label="所属区域"
                align="center"
              ></el-table-column>
              <el-table-column
                label="状态"
                prop="state"
                align="center"
              ></el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="
                      handleEdit(scope.$index, scope.row);
                      dialogFormVisible_edit = true;
                    "
                    >编辑</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <Pagination @shareData="shareData" :totalCount="count" 
            ref='toNumOne'></Pagination>
          </el-main>
          <!-- 新增 -->
          <el-dialog
            title="添加"
            :visible.sync="dialogFormVisible_add"
            width="500px"
          >
            <el-form :model="addForm" :rules="rules" ref='addForm'>
              <el-form-item label="桌位名称:" prop='name'>
                <el-input
                  v-model="addForm.name"
                  autocomplete="off"
                  style="width: 180px; margin-left: 15px"
                ></el-input>
              </el-form-item>
              <el-form-item label="可容纳人数:" prop='num'>
                <el-input
                  v-model="addForm.num"
                  autocomplete="off"
                  style="width: 180px"
                ></el-input>
              </el-form-item>
              <el-form-item label="状态：">
                <el-switch
                  v-model="addForm.state"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  style="margin-left: 30px"
                  active-value="1"
                  inactive-value="0"
                >
                </el-switch>
              </el-form-item>
              <el-form-item label="区域：" prop='regionId'>
                <el-select
                  v-model="addForm.regionId"
                  autocomplete="off"
                  style="width: 180px; margin-left: 30px"
                >
                  <el-option label="A区" value="0"></el-option>
                  <el-option label="B区" value="1"></el-option>
                  <el-option label="C区" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible_add = false"
                >取 消</el-button
              >
              <el-button
                type="primary"
                @click="
                   submitForm('addForm')
                "
                >确 定</el-button
              >
            </div>
          </el-dialog>
          <!-- 编辑 -->
          <el-dialog
            title="添加"
            :visible.sync="dialogFormVisible_edit"
            width="500px"
          >
            <el-form :model="editForm">
              <el-form-item label="桌位名称:">
                <el-input
                  v-model="editForm.name"
                  autocomplete="off"
                  style="width: 180px; margin-left: 15px"
                ></el-input>
              </el-form-item>
              <el-form-item label="可容纳人数:">
                <el-input
                  v-model="editForm.num"
                  autocomplete="off"
                  style="width: 180px"
                ></el-input>
              </el-form-item>
              <el-form-item label="状态：">
                <el-switch
                  v-model="editForm.state"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  style="margin-left: 30px"
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
              </el-form-item>
              <el-form-item label="区域：">
                <el-select
                  v-model="editForm.regionId"
                  autocomplete="off"
                  style="width: 180px; margin-left: 30px"
                >
                  <el-option label="A区" :value="0"></el-option>
                  <el-option label="B区" :value="1"></el-option>
                  <el-option label="C区" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible_edit = false"
                >取 消</el-button
              >
              <el-button
                type="primary"
                @click="
                  dialogFormVisible_edit = false;
                  editTableList();
                "
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
import Pagination from "../../components/common/Pagination.vue";
import Search from "../../components/tang/search.vue";
export default {
  components: {
    Search,
    Pagination,
  },
  data() {
    return {
      rules:{
        name:[
           { required: true, message: '请输入桌位名称', trigger: 'blur' },
          { min: 1, max: 4, message: '长度在 1 到 4 个字符', trigger: 'blur' }
        ],
        num:[
           { required: true, message: '请输入可容纳人数', trigger: 'blur' },
          { min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur' }
        ],
        regionId:[
           { required: true, message: '请选择区域', trigger: 'change' }
        ]

      },
      pageCount: 5,
      nowPage: 1,
      count: 0,
      // currentPage:1,
      nowReginId: "",
      activePath: "/main/tableList",
      multipleSelection: [],
      dialogFormVisible_add: false,
      dialogFormVisible_edit: false,
      addForm: {
        name: "",
        num: "",
        state: "",
        regionType: "",
        regionId: "",
      },
      editForm: {
        name: "",
        num: "",
        state: "",
        regionType: "",
        regionId: "",
      },
      tableData: [],
    };
  },
  methods: {
    // 获取页面数据
    getInfo() {
      this.axios({
        method: "post",
        url: "/TableList/list",
        data: {
          page: this.nowPage,
          pageSize: this.pageCount,
          regionId: this.nowReginId,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.count = res.data.count;
          this.tableData = [];
          for (let i = 0; i < res.data.data.length; i++) {
            this.tableData.push(res.data.data[i]);
            if (this.tableData[i].state == 0) {
              this.tableData[i].state = "未使用";
            } else {
              this.tableData[i].state = "正常";
            }
          }
        }
      });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.$refs);
      this.multipleSelection = [];
      for (let i = 0; i < val.length; i++) {
        this.multipleSelection.push(val[i].id);
      }
      this.multipleSelection = {
        ids: this.multipleSelection,
      };
      console.log(this.multipleSelection);
    },
    batchDelete() {
      this.axios({
        method: "post",
        url: "/TableList/deleteByIds",
        data: this.multipleSelection,
      }).then((res) => {
        console.log(res);
        this.getInfo();
      });
    },
    // 分页
    shareData(v) {
      // console.log(v);
      this.pageCount = v.pageCount;
      this.nowPage = v.nowPage;
      this.getInfo();
    },
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
      this.nowReginId = key;
      this.nowPage=1
      this.$refs.toNumOne.toOne()
      // this.firstPage=1
      this.getInfo();
    },
    // 增删改查
    handleEdit(index, row) {
      console.log(1, row);
      this.editForm = {
        name: row.name,
        num: row.num,
        state: row.state,
        regionType: row.regionType,
        regionId: row.regionId,
        id: row.id,
      };
      if (this.editForm.state == "未使用") {
        this.editForm.state = 0;
      } else {
        this.editForm.state = 1;
      }
      console.log(this.editForm);
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.axios({
        method: "get",
        url: "/TableList/delete/" + row.id,
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.getInfo();
        }
      });
    },
     //表单验证
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.addTableList()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    // 添加
    addTableList() {
      switch (this.addForm.regionId) {
        case "0":
          this.addForm.regionType = "A";
          break;
        case "1":
          this.addForm.regionType = "B";
          break;
        case "2":
          this.addForm.regionType = "C";
          break;
      }
      console.log(this.addForm);
      this.axios({
        method: "post",
        url: "/TableList/add",
        data: this.addForm,
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.addForm = {
            name: "",
            num: "",
            state: "",
            regionType: "",
            regionId: "",
          };
          this.nowReginId="",
          this.getInfo();
          this.dialogFormVisible_add = false
        }
      });
    },
    editTableList() {
      this.axios({
        method: "post",
        url: "/TableList/update",
        data: this.editForm,
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.getInfo();
        }
      });
    },
  },
  created() {
    this.getInfo();
  },
};
</script>

<style lang='less' scoped>
.table-title {
  margin: 1rem;
  background-color: #f5f9fc;
  box-sizing: border-box;
  height: 4rem;
  line-height: 40px;
  padding-left: 10px;
  padding-right: 10px;
}
.table-box {
  margin-top: 1.5rem;
  border: 0.1rem solid #dbe0e9;
  background-color: #fff;
}
.btn-size {
  height: 3rem;
  padding: 0.6rem 2rem;
}
.table-content {
  background-color: #f5f9fc;
  box-sizing: border-box;
  margin: 0 1rem 1rem 1rem;
  padding: 1rem;
}
.menu-title {
  color: rgb(0, 0, 0);
  font-weight: bolder;
  background-color: #e1edf3 !important;
  opacity: 100;
}
</style>